<template>
  <div class="ease-sku">
    <div class="part-spec-section">
      <div class="spec-box">
        <div class="spec-select">
          <div class="sel-box">
            <el-cascader v-model="selectAttrIds" :options="skuAttrData" :props="props" clearable
              @change="selectSkuAttr"></el-cascader>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sku-block',
  props: {
    maxSize: {
      type: Number,
      default: 2
    },
    categoryId: Number,
    hasSkuImg: {
      type: Boolean,
      default: false
    },
    skuAttrs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      props: {
        value: 'id',
        label: 'name',
        children: 'attrValues',
        multiple: true,
        // emitPath: false,
      },
      selectAttrIds: [],
      skuAttrData: [],
      selectAttrs: [],

    }
  },
  computed: {
    skuAttrMap() {
      return this.skuAttrData.reduce((map, attr) => {
        let newAttr = {
          attrId: attr.id,
          attrName: attr.name,
          attrValueMap: attr.attrValues.reduce((map, value) => {
            let newValue = {
              attrValueId: value.id,
              attrValueName: value.name
            };
            map[value.id] = newValue;
            return map;
          }, {})
        }
        map[attr.id] = newAttr;
        return map;
      }, {});
    },
  },

  methods: {
    init() {
      console.log("sku属性", this.skuAttrs)
      this.skuAttrData = this.skuAttrs.map(item => {
        return {
          id: item.attrId,
          name: item.name,
          attrValues: item.attrValues.map(value => {
            return {
              id: value.attrValueId,
              name: value.value
            }
          })
        }
      })
    },
    selectSkuAttr(data) {
      this.selectAttrs = []
      if (data.length > 0) {
        this.selectAttrs = this.transformArray(data, this.skuAttrMap)
        console.log("选中节点", this.selectAttrs)
      }
      let salesAttrs = this.transform(this.selectAttrs)
      console.log("sku列表", salesAttrs)
      this.$emit("input", salesAttrs)
    },
    //级联选择器id数组转父子对象
    transformArray(originalArray, map) {
      let result = [];
      let temp = {};
      for (let element of originalArray) {
        let attr = map[element[0]];
        if (temp[attr.attrId]) {
          temp[attr.attrId].attrValues.push(attr.attrValueMap[element[1]]);
        } else {
          let newAttr = {
            attrId: attr.attrId,
            attrName: attr.attrName,
            attrValues: [attr.attrValueMap[element[1]]]
          };
          result.push(newAttr);
          temp[attr.attrId] = newAttr;
        }
      }
      return result;
    },
    //计算所有的sku组合
    transform(salesAttrs) {
      let result = [];
      if (salesAttrs.length === 0) return result;
      function helper(current, remaining) {
        if (remaining.length === 0) {
          result.push(current);
          return;
        }
        let [first, ...rest] = remaining;
        for (let value of first.attrValues) {
          helper([...current, {
            attrId: first.attrId,
            attrName: first.attrName,
            attrValueId: value.attrValueId,
            attrValueName: value.attrValueName
          }], rest);
        }
      }
      helper([], salesAttrs);
      return result;
    }
  }
}
</script>

<style lang="scss">
.ease-sku {
  .add-btn.el-button {
    border-color: #02a1e9;
    color: #02a1e9;
  }

  .warning {
    display: inline-block;
    margin-left: 15px;
    color: #e43130;
    font-size: 13px;
  }
}

/* 商品属性 */
.part-spec-section {
  margin-top: 10px;
  margin-bottom: 20px;

  .spec-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 400px;
    padding: 8px 10px;
    background: #f4f5f9;

    .spec-select {
      display: flex;
      align-items: center;
    }

    .spec-select .sel-add-img {
      margin-left: 20px;
    }

    .del-btn {
      font-size: 13px;
      color: #02a1e9;
      cursor: pointer;
    }
  }
}
</style>
